<!DOCTYPE HTML>
<html>
<head>

</head>
<style>
    .div1 {
        height: 50px;
        width: 100px;
        border: 1px solid black;
    }

    #drag1, #drag2 {
        height: 50px;
        width: 100px;
    }
</style>
<body>
<div class="div1" id="outter1" ondrop="drop(event,this)"
     ondragover="allowDrop(event)">
    <img id="drag1" src="../src/pic/earth149.png" draggable="true"
         ondragstart="drag(event)" onclick="click(event)"/></div>

<div class="div1" id="outter2" ondrop="drop(event,this)" ondragover="allowDrop(event)">
    <img id="drag2" src="../src/pic/device-computer-icon.png" draggable="true"
         ondragstart="drag(event)"/>
</div>

<script type="text/javascript">
    function allowDrop(event) {
        event.preventDefault();
        //默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
        //drop 事件的默认行为是以链接形式打开
    }

    function drag(event) {
        event.dataTransfer.setData("img", event.target.id);//传递拖拽数据
        event.dataTransfer.setData("parentId",document.getElementById(event.target.id).parentNode.id);
    }

    function drop(event,that) {
        event.preventDefault();
        var sourceImgId = event.dataTransfer.getData("img");
        var sourceParentDivId = event.dataTransfer.getData("parentId");
        var targetImg=document.getElementById(that.id).firstElementChild;
        document.getElementById(that.id).appendChild(document.getElementById(sourceImgId));
        document.getElementById(sourceParentDivId).appendChild(targetImg);
    }
</script>
</body>
</html>